﻿<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="JS代码,放大缩小,菜单,导航菜单,CSS3" />
    <meta name="description" content="一个CSS3实现的可缩放显示的超酷菜单效果，更多放大缩小,菜单,导航菜单,CSS3请访问脚本分享网JS代码频道。" />
    <title>一个CSS3实现的可缩放显示的超酷菜单效果_脚本分享网</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
        }

        body {
            font-family: arial,sans-serif;
            background: #6CC1EA;
            padding: 1em;
        }

        .character {
            background-color:gold;
            padding: 250px 0 0 0;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 420px;
            height: 170px;
            -moz-border-radius: 160px;
            -moz-box-shadow: 5px 5px 5px rgba(0,0,0,.4);
            -webkit-border-radius: 160px;
            -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.4);
            border-radius: 50px;
            box-shadow: 5px 5px 5px rgba(0,0,0,.4);
            font-size: 20px;
            color: #333;
        }

            .character a {
                display: block;
                color: #369;
                text-decoration: none;
            }

        .container {
            background-color:gray;
            float: left;
            position: relative;
            height: 200px;
            width: 150px;
            margin: 0 auto;
            -moz-transform: scale(.3);
            -moz-transition: all .5s;
            -webkit-transform: scale(.3);
            -webkit-transition: all .5s;
            -o-transform: scale(.3);
            -o-transition: all .5s;
            transform: scale(.3);
            transition: all .5s;
        }

            .container:hover {
                -moz-transform: scale(1);
                -webkit-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
            }

        .container {
            -moz-animation-delay: .5s;
            -moz-animation-duration: 1s;
            -moz-animation-name: slidein;
            -webkit-animation-delay: .5s;
            -webkit-animation-duration: 1s;
            -webkit-animation-name: slidein;
            -o-animation-delay: .5s;
            -o-animation-duration: 1s;
            -o-animation-name: slidein;
        }

        .wrapDiv {
            width:600px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="wrapDiv">
        <div class="container">
            <h1 class="character">1</h1>
        </div>
        <div class="container">
            <header>
                <h1 class="character">2</h1>
            </header>

        </div>
        <div class="container">
            <header>
                <h1 class="character">3</h1>
            </header>

        </div>
        <div class="container">
            <header>
                <h1 class="character">4</h1>
            </header>

        </div>

    </div>

</body>
</html>